<template>
  
  <div class="app">
     <!-- 1.0 轮播使用的mint-ui中的swipe组件 -->
      <slider :swipeList='swipeList'></slider>    
      <nav>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/news/newslist">
                        <span class="mui-icon mui-icon-new"></span>
                        <div class="mui-media-body">新闻资讯</div>
                        </router-link>
                </li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/photo/photolist">
                        <span class="mui-icon mui-icon-share"></span>
                        <div class="mui-media-body">图片分享</div>
                        </router-link>
                </li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="/goods/goodslist">
                        <span class="mui-icon mui-icon-shopping"></span>
                        <div class="mui-media-body">商品购买</div>
                        </router-link>
                </li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                        <span class="mui-icon mui-icon-msg"></span>
                        <div class="mui-media-body">留言反馈</div>
                        </router-link>
                </li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                        <span class="mui-icon mui-icon-video"></span>
                        <div class="mui-media-body">视频专区</div>
                        </router-link>
                </li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <router-link to="#">
                        <span class="mui-icon mui-icon-about"></span>
                        <div class="mui-media-body">联系我们</div>
                        </router-link>
                </li>                
            </ul> 

      </nav>
  </div>
</template>

<script>
  import slider from '../subcomp/slider.vue'
  export default{
      created(){
        
          this.getListImg();
      },
      data() {
          return {
              swipeList:[]
          }
      },
      components:{
        slider
      },
      methods:{
        getListImg(){
          this.$http.get('http://vuecms.ittun.com/api/getlunbo').
          then(res=>{
              this.swipeList = res.body.message;
          })
        }
      }
  }  
</script>

<style scoped>
  @media (min-width: 400px){
        .mui-col-sm-3 {
           width: 30%; 
      }
  }

  .mui-content{
      background-color: #fff;
  }
  .mui-grid-view.mui-grid-9{
      background-color: #fff;
      border-top:none;
      border-left:none;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell
  {
      border-right:none;
      border-bottom:none;
  }

 


  /*清除默认的样式*/
  .mui-icon-new:before,
  .mui-icon-share:before,
  .mui-icon-shopping:before,
  .mui-icon-msg:before,
  .mui-icon-video:before,
  .mui-icon-about:before{
      content: '';
  }
.mui-icon{
  width: 50px;
  height: 50px;
   background-repeat: round;
}
       
.mui-icon-new{
  background-image: url('../../../static/imgs/menu10.png');
 
}
.mui-icon-share{
  background-image: url('../../../static/imgs/menu3.png');
 
}
.mui-icon-shopping{
  background-image: url('../../../static/imgs/menu4.png');
 
}
.mui-icon-msg{
  background-image: url('../../../static/imgs/menu5.png');
 
}
.mui-icon-video{
  background-image: url('../../../static/imgs/menu6.png');
 
}
.mui-icon-about{
  background-image: url('../../../static/imgs/menu9.png');
  
}
</style>